<template>
  <h1>姓：{{firstName}}</h1>
  <h1>名：{{lastName}}</h1>
  <button @click="changeName">改变我的名字：{{name}}</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "",
});
</script>

<script setup lang="ts">
  import {ref , computed} from "vue"

  let firstName = ref("刘")
  let lastName = ref("二")

  let name = computed({
    get(){
      return firstName.value + lastName.value
    },
    set(val){
      firstName.value = val.split(" ")[0]
      lastName.value = val.split(" ")[1]
    }
  })

  const changeName = () => {
    name.value = "王 五"
  }


</script>